<template>
  <view class="container">
    <select class="setle" placeholder="请选择">
      <el-option> </el-option>
    </select>
    <view class="intro">姓名：{{ name }}</view>
    <button @click="changName">修改名字</button>
    <navigator url="/pages/tg/tg" open-type="navigate">
      <button>跳转到新页面</button>
    </navigator>
	<navigator url="/pages/tanchuang/tanchuang" open-type="navigate">
	  <button>跳转弹窗页面</button>
	</navigator>
    <button @click="buttonClick">{{ title }}</button>
  </view>
  <view>
    <swiper class="baner" indicator-dots circular :autoplay="false">
      <swiper-item v-for="item in pictures" :key="item.id">
        <image @tap="onpreviewImage(item.url)" :src="item.url"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup name="Person">
import { ref, reactive } from "vue";

let name = ref("zhangzhang");
function changName() {
  name.value = "张三";
}
let title = ref("点我");
function buttonClick() {
  title.value = "我被点了";
}
let pictures = reactive([
  {
    id: "1",
    url: "https://t7.baidu.com/it/u=3423293041,3900166648&fm=193&f=GIF",
  },
  {
    id: "2",
    url: "https://t7.baidu.com/it/u=3241434606,2550606435&fm=193&f=GIF",
  },
]);
function onpreviewImage(url) {
  // console.log(url)
  wx.previewImage({
    urls: this.pictures.map((v) => v.url),
    current: url,
  });
}
</script>

<style>
.baner,
.baner image {
  width: 750rpx;
  height: 750rpx;
}
.setle {
  width: 100rpx;
}
</style>
